<script setup>
import { ref, provide } from "vue";
import useAlertStore from "../stores/alert.js";
import Header from "./Header.vue";
import Footer from "./Footer.vue";
import Nav from "./Nav.vue";
import Alert from "./Alert.vue";

const alert = useAlertStore();
provide("alert", alert);

const index = ref(0);
provide("index", index);

const filename = ref("");
provide("filename", filename);
</script>

<template>
    <div class="flex bg-iso-gray-600">
        <Header></Header>
        <Nav></Nav>

        <article class="flex w-full">
            <p class="w-48"></p>
            <div class="flex-1">
                <slot name="content"></slot>
            </div>
        </article>

        <Footer></Footer>
    </div>

    <Alert></Alert>
</template>

<style>
@import "/public/style.css";
</style>
